<template>
  <div
      class="session-item"
      :class="{ 'is-active': active, 'has-unread': session.unread }"
      @click.stop="handleItemClick"
  >
    <!-- 左侧会话信息 -->
    <div class="session-info">
      <div class="info-header">
        <span class="session-name">{{ session.name }}</span>
        <el-tag
            v-if="session.unread"
            size="small"
            type="danger"
            class="unread-badge"
        >
          {{ session.unread > 99 ? '99+' : session.unread }}
        </el-tag>
      </div>
      <div class="info-content">
        <span class="preview-text">{{ previewText }}</span>
        <span class="time-text">{{ session.time }}</span>
      </div>
    </div>

    <!-- 右侧操作按钮 -->
    <div class="session-actions">
      <el-button
          type="primary"
          size="small"
          :icon="Edit"
          circle
          class="action-btn"
          @click.stop="handleEdit"
      />
      <el-button
          type="danger"
          size="small"
          :icon="Delete"
          circle
          class="action-btn"
          @click.stop="handleDelete"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'

const props = defineProps({
  session: {
    type: Object,
    required: true,
    validator: (value) => {
      return ['id', 'name'].every(key => key in value)
    }
  },
  active: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click', 'edit', 'delete'])

// 预览文本处理
const previewText = computed(() => {
  const msg = props.session.lastMessage || '暂无消息'
  return msg.length > 20 ? `${msg.slice(0, 20)}...` : msg
})

// 点击事件处理
const handleItemClick = () => {
  emit('click', props.session)
}

// 编辑事件
const handleEdit = () => {
  emit('edit', props.session.id)
}

// 删除事件
const handleDelete = () => {
  emit('delete', props.session.id)
}
</script>

<style scoped lang="scss">
.session-item {
  $item-height: 72px;
  $padding: 12px;

  position: relative;
  height: $item-height;
  padding: $padding;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #ffffff;
  border-bottom: 1px solid #ebeef5;

  &:hover {
    background: #f5f7fa;

    .session-actions {
      opacity: 1;
      transform: translateX(0);
    }
  }

  &.is-active {
    background: #f0f7ff;
    border-right: 3px solid #409eff;

    .session-name {
      color: #409eff;
    }
  }

  &.has-unread {
    .preview-text {
      font-weight: 500;
    }
  }
}

.session-info {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.session-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-badge {
  margin-left: 8px;
  flex-shrink: 0;
}

.info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-text {
  flex: 1;
  font-size: 12px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.time-text {
  font-size: 10px;
  color: #909399;
  flex-shrink: 0;
}

.session-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;

  .action-btn {
    --el-button-size: 28px;
    :deep() .el-icon {
      font-size: 14px;
    }
  }
}
</style>
